<template>
	<view class="contina">
		<view class="top w">
			<u-navbar title="创建企业" :titleStyle="{color:'#ffffff'}" bgColor="transparent" :autoBack="true">
			</u-navbar>
			<view class="scrollView">
				<view class="tip">请先创建一家您的企业</view>
				<div class="card">
					<u--form labelPosition="left" :model="form" labelWidth="120" ref="form1" borderBottom
						:labelStyle="labelStyle">
						<view class="title">营业证件信息</view>
						<u-form-item label="企业名称" prop="form.name" borderBottom>
							<u--input v-model="form.name" placeholder="请输入您的企业名称" border="none" inputAlign="right">
							</u--input>
						</u-form-item>
						<u-form-item label="统一社会信用代码" prop="form.credit_code" borderBottom>
							<u--input v-model="form.credit_code" placeholder="请输入统一社会信用代码" border="none"
								inputAlign="right">
							</u--input>
						</u-form-item>
						<u-form-item label="营业执照扫描件" prop="form.image" borderBottom @click="upImg('image')">
							<view class="par_upload">
								<image v-if="form.image" :src="form.image"></image>
								<image v-else src="../../static/image/phone.png"></image>
							</view>
						</u-form-item>
						<u-form-item label="营业执照有效期" borderBottom>
							<view class="flex_a_c">
								<view class="time" @click="showDate(1)">{{form.start_at?form.start_at:'开始日期'}}</view>
								-
								<view class="time" @click="showDate(2)" style="margin-right: 20rpx;">
									{{form.end_at?form.end_at:'结束日期'}}
								</view>
								<u-checkbox-group :size="18" @change="cc1">
									<u-checkbox :customStyle="{marginRight: '10rpx'}" :checked="ck1" :key="1" label="长期"
										name="changqi">
									</u-checkbox>
								</u-checkbox-group>

							</view>
						</u-form-item>
						<view class="title" style="margin-top: 50rpx;">法定代表人信息</view>
						<u-form-item label="法定代表人姓名" prop="form.lr_name" borderBottom>
							<u--input v-model="form.lr_name" placeholder="请输入您的法定代表人姓名" border="none"
								inputAlign="right">
							</u--input>
						</u-form-item>
						<u-form-item label="法人身份证号码" prop="form.lr_id_no" borderBottom>
							<u--input v-model="form.lr_id_no" placeholder="请输入法人身份证号码" border="none" inputAlign="right">
							</u--input>
						</u-form-item>
						<u-form-item label="法人手机号码" prop="form.lr_phone" borderBottom>
							<u--input v-model="form.lr_phone" placeholder="法人手机号码" border="none" inputAlign="right">
							</u--input>
						</u-form-item>
						<u-form-item label="法人证件有效期" borderBottom>
							<view class="flex_a_c">
								<view class="time" @click="showDate(3)">
									{{form.lr_id_card_start?form.lr_id_card_start:'开始日期'}}
								</view>
								-
								<view class="time" @click="showDate(4)" style="margin-right: 20rpx;">
									{{form.lr_id_card_end?form.lr_id_card_end:'结束日期'}}
								</view>
								<u-checkbox-group :size="18" @change="cc2">
									<u-checkbox :customStyle="{marginRight: '10rpx'}" :checked="ck2" :key="1" label="长期"
										name="1">
									</u-checkbox>
								</u-checkbox-group>

							</view>
						</u-form-item>
						<u-form-item label="法人身份证照片" borderBottom>
							<view class="flex_a_c" style="margin-left: auto;">
								<view class="par_upload" style="margin: 0;" @click="upImg('id_card_image1')">
									<image v-if="form.id_card_image1" :src="form.id_card_image1"></image>
									<image v-else src="../../static/image/phone.png"></image>
								</view>
								<view class="par_upload" style="margin-left: 20rpx;" @click="upImg('id_card_image2')">
									<image v-if="form.id_card_image2" :src="form.id_card_image2"></image>
									<image v-else src="../../static/image/phone.png"></image>
								</view>
							</view>
						</u-form-item>
					</u--form>
					<view class="ceatBtn" @click="submit">创建</view>
				</div>
			</view>
		</view>
		<u-datetime-picker :show="show" mode="date" v-model="datetime" @cancel="show=false"
			@confirm="show=false"></u-datetime-picker>
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				labelStyle: {
					fontSize: "28rpx"
				},
				edit: 0,
				show: false,
				datetime: '',
				dateType: 1,
				ck1: false,
				ck2: false,
				form: {
					name: '',
					image: '',
					image_forever: '',
					credit_code: '',
					start_at: '',
					end_at: '',
					id_card_image1: '',
					id_card_image2: '',
					lr_name: '',
					lr_id_no: '',
					lr_id_card_start: '',
					lr_id_card_end: '',
					lr_phone: '',
					duration: '',
					forever: '',
				},
			}
		},
		components: {
			flooterCom
		},
		onLoad(option) {
			this.edit = option.edit
			if (this.edit == 1) {
				this.$api.corpApi.detail({id:option.id}).then(res => {
					this.form = res
					this.ck1 = res.image_forever ? true : false
					this.ck2 = res.forever ? true : false
				})
			}
			uni.setNavigationBarTitle({
				title: this.edit == 1 ? '企业资料' : '创建企业'
			})
		},
		watch: {
			datetime(n, o) {
				let d = this.$dayjs(n ? n : o).format('YYYY-MM-DD');
				if (this.dateType == 1) {
					this.form.start_at = d
				}
				if (this.dateType == 2) {
					this.form.end_at = d
				}
				if (this.dateType == 3) {
					this.form.lr_id_card_start = d
				}
				if (this.dateType == 4) {
					this.form.lr_id_card_end = d
				}
				this.datetime = ''
			}
		},
		methods: {
			showDate(type) {
				this.dateType = type
				this.show = true
			},
			cc1(v) {
				this.form.image_forever = v.length
			},
			cc2(v) {
				this.form.forever = v.length
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					if (this.edit == 1) {
						await this.$api.corpApi.update(this.form)
					} else {
						await this.$api.corpApi.add(this.form)
					}
					this.$fun.tipBack('保存成功')
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			upImg(field) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$fun.uploadImage(tempFilePaths[0]).then(res => {
							console.log()
							this.form[field] = res.url
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contina {
		height: 100vh;

		.top {
			background-image: linear-gradient(#1676FE, #F4F9FF);
			height: 100%;

			::v-deep .u-icon__icon {
				color: #ffffff !important;
			}

			.scrollView {
				height: calc(100% - 176rpx);
				margin-top: 176rpx;

				.tip {
					font-size: 34rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 10rpx;
				}

				.card {
					.title {
						font-size: 36rpx;
						font-weight: 400;
						color: #000000;
						margin-bottom: 20rpx
					}

					.time {
						font-size: 20rpx;
						font-weight: 400;
						color: #999999;
					}

					.par_upload {
						width: 100rpx;
						height: 100rpx;
						background-color: #F4F5F7;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 8rpx;
						margin-left: auto;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.ceatBtn {
						height: 96rpx;
						background: #0074FF;
						font-size: 32rpx;
						font-weight: 400;
						text-align: center;
						color: #FFFFFF;
						line-height: 96rpx;
						border-radius: 100rpx;
						margin-top: 50rpx;
					}
				}
			}
		}
	}
</style>